<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:a="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                template="template.xhtml">

<ui:define name="content">
<div class="section">
    <h1>Book Hotel</h1>
</div>
<div class="section">
    <h:form id="booking">
    <fieldset>
        <div class="entry">
            <div class="label">Name:</div>
            <div class="output">#{hotel.name}</div>
        </div>
        <div class="entry">
            <div class="label">Address:</div>
            <div class="output">#{hotel.address}</div>
        </div>
        <div class="entry">
            <div class="label">City, State:</div>
            <div class="output">#{hotel.city}, #{hotel.state}</div>
        </div>
        <div class="entry">
            <div class="label">Zip:</div>
            <div class="output">#{hotel.zip}</div>
        </div>
        <div class="entry">
            <div class="label">Country:</div>
            <div class="output">#{hotel.country}</div>
        </div>
        <div class="entry">
            <div class="label">Nightly rate:</div>
            <div class="output">
                <h:outputText value="#{hotel.price}">
                    <f:convertNumber type="currency" currencySymbol="$"/>
                </h:outputText>
            </div>
        </div>      
        <s:validateAll id="validateAll">    
            <f:facet id="AroundInvalidFieldFacet" name="aroundInvalidField">
                <s:span id="Error" styleClass="errors"/>
            </f:facet>
            <f:facet id="AfterInvalidFieldFacet" name="afterInvalidField">
                <s:div id="Message" styleClass="errors">
                    <s:message/>
                </s:div>
            </f:facet>          
            <div class="entry">
                <div class="label"><h:outputLabel id="CheckinDateLabel" for="checkinDate">Check In Date:</h:outputLabel></div>
                <div class="input">
                    <s:decorate id="checkinDateDecorate">
                        <rich:calendar id="checkinDate" value="#{booking.checkinDate}" required="true"
                            datePattern="MM/dd/yyyy" event="onblur" reRender="checkinDateDecorate" style="width: auto;"/>
                    </s:decorate>
                </div>
            </div>          
            <div class="entry">
                <div class="label"><h:outputLabel id="CheckoutDateLabel" for="checkoutDate">Check Out Date:</h:outputLabel></div>
                <div class="input">
                    <s:decorate id="checkoutDateDecorate">
                        <rich:calendar id="checkoutDate" value="#{booking.checkoutDate}" required="true"
                            datePattern="MM/dd/yyyy" event="onblur" reRender="checkoutDateDecorate" style="width: auto;"/>
                    </s:decorate>
                </div>
            </div>
            <div class="entry">
                <div class="label"><h:outputLabel id="RoomPrefLabel" for="beds">Room Preference:</h:outputLabel></div>
                <div class="input">
                    <s:decorate id="bedsDecorate">
                        <h:selectOneMenu id="beds" value="#{booking.beds}">
                            <f:selectItem id="OneKingBed" itemLabel="One king-size bed" itemValue="1"/>
                            <f:selectItem id="TwoDoubleBeds" itemLabel="Two double beds" itemValue="2"/>
                            <f:selectItem id="ThreeBeds" itemLabel="Three beds" itemValue="3"/>
                        </h:selectOneMenu>
                    </s:decorate>
                </div>
            </div>          
            <div class="entry">
                <div class="label"><h:outputLabel id="SmokingPrefLabel" for="smoking">Smoking Preference:</h:outputLabel></div>
                <div id="radio" class="input">
                    <s:decorate id="smokingDecorate">
                        <h:selectOneRadio id="smoking" value="#{booking.smoking}" layout="pageDirection">
                            <f:selectItem id="Smoking" itemLabel="Smoking" itemValue="true"/>
                            <f:selectItem id="NonSmoking" itemLabel="Non Smoking" itemValue="false"/>
                        </h:selectOneRadio>
                    </s:decorate>
                </div>
            </div>          
            <div class="entry">
                <div class="label"><h:outputLabel id="CreditCardLabel" for="creditCard">Credit Card #:</h:outputLabel></div>
                <div class="input">
                    <s:decorate id="creditCardDecorate">
                        <h:inputText id="creditCard" value="#{booking.creditCard}" required="true">
                           <a:support id="onblur" event="onblur" reRender="creditCardDecorate"/>
                        </h:inputText>
                    </s:decorate>
                </div>
            </div>          
            <div class="entry">
                <div class="label"><h:outputLabel id="CreditCardNameLabel" for="creditCardName">Credit Card Name:</h:outputLabel></div>
                <div class="input">
                    <s:decorate id="creditCardNameDecorate">
                        <h:inputText id="creditCardName" value="#{booking.creditCardName}" required="true">
                           <a:support id="onblur" event="onblur" reRender="creditCardNameDecorate"/>
                        </h:inputText>
                    </s:decorate>
                </div>
            </div>          
            <div class="entry">
                <div class="label"><h:outputLabel for="creditCardExpiryMonth">Credit Card Expiry:</h:outputLabel></div>
                <div class="input">
                    <s:decorate id="CreditCardExpiryDecorate">
                        <h:selectOneMenu id="creditCardExpiryMonth" value="#{booking.creditCardExpiryMonth}">
                            <f:selectItem id="Jan" itemLabel="Jan" itemValue="1"/>
                            <f:selectItem id="Feb" itemLabel="Feb" itemValue="2"/>
                            <f:selectItem id="Mar" itemLabel="Mar" itemValue="3"/>
                            <f:selectItem id="Apr" itemLabel="Apr" itemValue="4"/>
                            <f:selectItem id="May" itemLabel="May" itemValue="5"/>
                            <f:selectItem id="Jun" itemLabel="Jun" itemValue="6"/>
                            <f:selectItem id="Jul" itemLabel="Jul" itemValue="7"/>
                            <f:selectItem id="Aug" itemLabel="Aug" itemValue="8"/>
                            <f:selectItem id="Sep" itemLabel="Sep" itemValue="9"/>
                            <f:selectItem id="Oct" itemLabel="Oct" itemValue="10"/>
                            <f:selectItem id="Nov" itemLabel="Nov" itemValue="11"/>
                            <f:selectItem id="Dec" itemLabel="Dec" itemValue="12"/>
                        </h:selectOneMenu>
                        <h:selectOneMenu id="creditCardExpiryYear" value="#{booking.creditCardExpiryYear}">                         
                            <f:selectItem id="Year2006" itemLabel="2006" itemValue="2006"/>
                            <f:selectItem id="Year2007" itemLabel="2007" itemValue="2007"/>
                            <f:selectItem id="Year2008" itemLabel="2008" itemValue="2008"/>
                            <f:selectItem id="Year2009" itemLabel="2009" itemValue="2009"/>
                            <f:selectItem id="Year2010" itemLabel="2010" itemValue="2010"/>
                        </h:selectOneMenu>
                    </s:decorate>
                </div>
            </div>          
        </s:validateAll>        
        <div class="entry errors">
            <h:messages id="messages" globalOnly="true"/>
        </div>      
        <div class="entry">
            <div class="label"></div>
            <div class="input">
                <h:commandButton id="proceed" value="Proceed" action="#{hotelBooking.setBookingDetails}"/>&#160;
                <s:button id="cancel" value="Cancel" action="#{hotelBooking.cancel}"/>
            </div>
        </div>      
    </fieldset>
    </h:form>
</div>
</ui:define>

</ui:composition>
